<template>
    <div class="mine">
        <div class="my-info">
            <div class="avatar-box">
                <img :src="imageBaseUrl + userInfo.value.avatar">
            </div>

            <div class="user-info">
                <div class="user-name">
                    {{ userInfo.value.username }}
                </div>

                <div class="fans-and-follow">
                    <span>关注：{{ userInfo.value.follow }}</span>
                    |
                    <span>粉丝：{{ userInfo.value.fans }}</span>
                </div>
            </div>
        </div>

        <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="作品" name="works">
                <div v-show="workVideoList.value == null || workVideoList.value.length <= 0">
                    <el-empty description="暂无作品" />
                </div>

                <VideoList :video-list="workVideoList.value" route-path="mineVideo"></VideoList>

            </el-tab-pane>
            <el-tab-pane label="点赞" name="like">
                <div v-show="likeVideoList.value == null || likeVideoList.value.length <= 0">
                    <el-empty description="暂无内容" />
                </div>

                <VideoList :video-list="likeVideoList.value" route-path="likeVideo"></VideoList>
            </el-tab-pane>
            <el-tab-pane label="收藏" name="collection">
                <div v-show="collectionVideoList.value == null || collectionVideoList.value.length <= 0">
                    <el-empty description="暂无内容" />
                </div>

                <VideoList :video-list="collectionVideoList.value" route-path="collectionVideo"></VideoList>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script setup>
import { onMounted, reactive, inject, ref } from "vue"
import { myinfo } from "@/api/user-service/user"
import {listShortVideoByMineCollection, getShortVideoByMineLike, getShortVideoByMinePublisher} from "@/api/short-video-server/short-video"
import { ElMessage } from 'element-plus'

import VideoList from '@/views/components/VideoList/index.vue'

const imageBaseUrl = inject('imageBaseUrl')

const userInfo = reactive({
    value: {}
})

const activeName = ref('works')

const likeVideoList = reactive({
    value: []
})

const collectionVideoList = reactive({
    value: []
})

const workVideoList = reactive({
    value: []
})

const handleClick = (tabsPaneContext, event) => {
  console.log(tabsPaneContext, event)
}

onMounted(() => {
    myinfo()
        .then(res => {
            if (res.code == 200) {
                userInfo.value = res.data
            }

            else ElMessage.error(res.msg)
        })

    listShortVideoByMineCollection()
    .then(res => {
        if(res.code == 200){
            collectionVideoList.value = res.data
        }

        else ElMessage.error(res.msg)
    })

    getShortVideoByMineLike()
    .then(res => {
        if(res.code == 200){
            likeVideoList.value = res.data
        }

        else ElMessage.error(res.msg)
    })

    getShortVideoByMinePublisher()
    .then(res => {
        if(res.code == 200){
            workVideoList.value = res.data
        } else ElMessage.error(res.msg)
    })
})
</script>

<style scoped>
.mine {
    padding: 10px;

    background: linear-gradient(97deg, #1a2037, #3f3030, #000000);

    border-radius: 8px;

}

.avatar-box img {
    width: 130px;
    height: 130px;
}

.my-info {
    display: flex;

    align-items: center;
}

.my-info .user-info .user-name {
    font-size: 24px;
}

.my-info .user-info>div {
    margin-bottom: 10px;
}

</style>